import QtQuick
import QtQuick.Controls
import Qt.labs.platform

Rectangle {
    id: importFramesWin
    width: 640
    height: 480
    visible: false
    color: mBackColor

    signal framesProcessOver()
    signal actionErrorTips(var tips)

    // 一些组件的固定尺寸
    property real fixedWidth: 100
    property real fixedHeight: 100

    property color mBackColor: "#34393e"
    property color mTextColor: "#e1e4e8"

    property var fileList: ["当前帧图片列表为空"]
    property string filePath: ""
    property int currentFrameCount: 0
    property int framesCount: 0
    property bool framesLoop: false

    property var helpContent: qsTr(" \
1. 选择取色模式，\"包含头尾\"从0开始取色；\"不包含头尾\"不从0开始取色\n \
2. 选择文件夹内任意一个帧图片进行预览，默认以图片高度作为灯珠边长计算灯珠数量\n \
3. 左键播放区域暂停或播放视频，右键播放区域弹出菜单选项\n \
4. 左侧帧图片列表可点击跳转至所选帧图片进行预览\n \
5. 根据需求修改灯珠数量，点击导入将帧图片生成灯效 \
")

    // 帧图片播放或暂停 true:播放 false:暂停
    function framesPlayPause(flag) {
        framesTimer.running = flag
    }
    // 设置当前显示帧
    function setFramesShow(index) {
        currentFrameCount = index
        framesImage.source = "file:///" + filePath + fileList[index]
        framesInfoModel.setProperty(3, "infoText", (index + 1).toString())
    }

    Connections {
        target: myHandle

        function onFramesOpened(fileCount) {
            setFramesShow(0)
            framesPlayPause(true)
            // 设置视频信息显示
            framesInfoModel.setProperty(0, "infoText", myHandle.getMyProperty("fWidth").toString())
            framesInfoModel.setProperty(1, "infoText", myHandle.getMyProperty("fHeight").toString())
            framesInfoModel.setProperty(2, "infoText", fileCount.toString())
            framesCount = fileCount
            ledNumEdit.inputText = myHandle.getMyProperty("lNum")
            fileList = myHandle.getFileList()
            filePath = myHandle.getMyProperty("fPath")
        }

        function onFramesProcessed() {
            progressBar.cpbValue = 1
        }
    }

    CustomHeaderBarClose {
        id: headerBar
        x: 0
        y: 0
        width: parent.width
        height: 34
        chbTitleText: qsTr("帧图片导入预览")
        chbHelpText: helpContent

        onClosePageBtnClicked: {
            parent.visible = false
        }
    }

    ListView {
        id: framesListView
        x: 0 - width
        width: 200
        height: parent.height
        clip: true
        visible: true

        model: fileList

        delegate: TextBtn {
            width: 200
            height: 20
            tbText: fileList[index]
            tbFontSize: 12
            tbTextHAlign: Text.AlignLeft
            tbBackColor: mBackColor
            tbColor: mTextColor
            tbTextX: 5

            onClicked: {
                framesPlayPause(false)
                setFramesShow(index)
            }
        }

        ScrollBar.vertical: AsScrollBar {}
    }

    Rectangle {
        id: framesShowerItem
        anchors.top: headerBar.bottom
        anchors.bottom: framesInfoItem.top
        anchors.left: parent.left
        anchors.right: parent.right
        color: "#2e2f30"

        Image {
            id: framesImage
            anchors.fill: parent
            fillMode: Image.PreserveAspectFit
        }

        MouseArea {
            anchors.fill: parent
            acceptedButtons: Qt.LeftButton | Qt.RightButton

            onClicked: function(mouse) {
                if(mouse.button === Qt.LeftButton) {
                    focus = true
                    framesPlayPause(!framesTimer.running)
                } else if(mouse.button === Qt.RightButton) {
                    playPauseMenu.open(mouse.x, mouse.y)
                }
            }
        }

        CustomMenu1 {
            id: playPauseMenu
            width: 120
            height: 60
            color: "#34393e"
            cmTextColor: "#e1e4e8"
            cmFontSize: 14
            cmItemHeight: height / menuText.length

            property var menuText: ["循环播放", "隐藏图片列表"]

            Component.onCompleted: {
                for(var i = 0; i < menuText.length; i++) {
                    playPauseMenu.cmListModel.set(i, {"mText": menuText[i]})
                }
            }

            onCustomMenuClicked: function(index) {
                switch(index) {
                    case 0:
                        framesLoop = !framesLoop
                        if(framesLoop) playPauseMenu.cmListModel.set(0, {"mText": qsTr("单次播放")})
                        else playPauseMenu.cmListModel.set(0, {"mText": qsTr("循环播放")})
                        break;
                    case 1:
                        framesListView.visible = !framesListView.visible
                        if(framesListView.visible) playPauseMenu.cmListModel.set(1, {"mText": qsTr("隐藏图片列表")})
                        else playPauseMenu.cmListModel.set(1, {"mText": qsTr("显示图片列表")})
                        break;
                }
            }
        }
    }

    Rectangle {
        id: framesInfoItem
        height: fixedHeight
        anchors.bottom: progressBar.top
        anchors.left: parent.left
        anchors.right: framesHandleItem.left
        anchors.bottomMargin: 4
        color: "transparent"

        ListModel {
            id: framesInfoModel
            ListElement { infoTitle: qsTr("图片宽度:"); infoText: qsTr("0") }
            ListElement { infoTitle: qsTr("图片高度:"); infoText: qsTr("0") }
            ListElement { infoTitle: qsTr("图片数量:"); infoText: qsTr("0") }
            ListElement { infoTitle: qsTr("当前显示:"); infoText: qsTr("0") }
        }

        GridView {
            id: framesInfo
            anchors.fill: parent
            clip: true
            interactive: false

            cellWidth: width / 2
            cellHeight: height / 3

            model: framesInfoModel
            delegate: framesInfoDelegate

        }

        Component {
            id: framesInfoDelegate

            TitleTextInput {
                width: framesInfo.width / 2
                height: framesInfo.height / 3
                titleText: infoTitle
                titleWidth: 90
                textColor: mTextColor
                textSize: 16
                inputBackColor: mBackColor
                inputBorderWidth: 0
                inputText: infoText
                inputReadOnly: true

            }
        }

        TitleTextInput {
            id: ledNumEdit
            width: framesInfo.width / 2
            height: framesInfo.height / 3
            anchors.left: parent.left
            anchors.bottom: parent.bottom
            titleText: qsTr("灯珠数量:")
            titleWidth: 90
            textColor: mTextColor
            textSize: 16
            inputBackColor: mBackColor
            inputBorderWidth: 1
            inputBorderColor: "#888888"
            inputText: "0"
            inputValidator: RegularExpressionValidator { regularExpression: /[0-9]+/ } // 文本验证器 仅可输入数字
        }

        Text {
            id: ledNumModeTitle
            width: 90
            height: framesInfo.height / 3
            anchors.left: ledNumEdit.right
            anchors.bottom: parent.bottom
            font.pixelSize: 16
            text: qsTr("取色模式:")
            color: mTextColor
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }

        AsComboBox {
            id: ledNumMode
            height: framesInfo.height / 3
            anchors.left: ledNumModeTitle.right
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            anchors.rightMargin: 10
            textRole: "key"
            model: ListModel {
                ListElement { key: qsTr("包含头尾") }
                ListElement { key: qsTr("不包含头尾") }
            }
            backDisplay: true
        }
    }

    Rectangle {
        id: framesHandleItem
        width: fixedWidth
        height: fixedHeight
        anchors.top: framesInfoItem.top
        anchors.bottom: progressBar.top
        anchors.right: parent.right
        color: "transparent"

        Column {
            id: framesHandleColumn
            anchors.fill: parent
            spacing: 10
            topPadding: 16
            leftPadding: (parent.width - openFramesBtn.width) / 2

            AsButton {
                id: openFramesBtn
                width: 70
                height: 30
                text: qsTr("选择")
                font.pixelSize: 14
                borderWidth: 1
                backColor: mBackColor
                textColor: mTextColor
                itemRadius: 8

                onClicked: {
                    myHandle.importAndOpenFrames(ledNumMode.currentIndex)
                }
            }

            AsButton {
                id: processFramesBtn
                width: 70
                height: 30
                text: qsTr("导入")
                font.pixelSize: 14
                borderWidth: 1
                backColor: mBackColor
                textColor: mTextColor
                itemRadius: 8

                onClicked: {
                    progressBar.reset()
                    var ledNum = Number(ledNumEdit.inputText)
                    if(ledNum && framesCount) {
                        progressBar.cpbValue = 0.9
                        myHandle.setMyProperty("lNum", ledNum)
                        myHandle.processFrames(ledNumMode.currentIndex)
                    } else {
                        actionErrorTips(qsTr("请先选择有效文件"))
                    }
                }
            }
        }
    }

    CustomProgressBar1 {
        id: progressBar
        width: parent.width
        height: 16
        anchors.bottom: parent.bottom
        cpbForeGradient: 100
        cpbBackColor: "#44484d"
        cpbTextColor: "#FFFFFF"

        onAnimationOver: {
            framesProcessOver()
        }
    }

    Timer {
        id: framesTimer
        interval: 33
        running: false
        triggeredOnStart: true
        repeat: true

        onTriggered: {
            setFramesShow(currentFrameCount)
            if(currentFrameCount >= (framesCount - 1)) {
                if(framesLoop) {
                    currentFrameCount = 0
                } else {
                    framesPlayPause(false)
                }
            } else {
                currentFrameCount++
            }
        }
    }

}
